<!--  -->
<template>
	<el-dialog v-model="componentDialogPartConfig.visible" :title="componentDialogPartConfig.title">
		<el-form
			:inline="true"
			ref="ruleFormRef"
			style=""
			:model="formComponentPart"
			:rules="rulesComponent"
			label-width="auto"
			class="form-product"
			status-icon
			require-asterisk-position="left"
			size="small"
			:label-position="'left'"
		>
			<el-row>
				<el-col span="12">
					<el-form-item label="零件名称" prop="name">
						<el-input v-model="formComponentPart.name" />
					</el-form-item>
				</el-col>
				<el-col span="12">
					<el-form-item label="零件ID" prop="id">
						<el-input v-model="formComponentPart.id" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row></el-row>
			<el-row>
				<el-col span="12">
					<el-form-item label="BOM" prop="bom">
						<el-input v-model="formComponentPart.bom" />
					</el-form-item>
				</el-col>
				<el-col span="12">
					<el-form-item label="技术特性参数" prop="featureKey">
						<el-input v-model="formComponentPart.featureKey" />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col span="12">
					<el-form-item label="技术特性value" prop="featureValue">
						<el-input v-model="formComponentPart.featureValue" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="save">保存</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';

const props = defineProps({
	componentDialogPartConfig: {
		type: Object,
		default: {
			visible: false,
			title: '',
		},
	},
});

const emits = defineEmits(['cancel']);

const formComponentPart = reactive({
	name: '',
	id: '',
	bom: '',
	featureKey: '',
	featureValue: '',
});

const rulesComponent = reactive({
	name: {
		required: true,
		message: '必填',
	},
	id: {
		required: true,
		message: '必填',
	},
	bom: {
		required: true,
		message: '必填',
	},
	featureKey: {
		required: true,
		message: '必填',
	},
	featureValue: {
		required: true,
		message: '必填',
	},
});

const cancel = () => {
	emits('cancel');
};

const save = () => {};
</script>
<style lang="scss"></style>
